import React,{Component} from 'react';
import { View,Text,Image,StatusBar,StyleSheet } from 'react-native';
// 引入像素转换工具类
import {pxTodp} from '../../../utils/UtilKit';
// 引入UI框架库
import Icon from 'react-native-vector-icons/FontAwesome';
import {Input} from 'react-native-elements';

import Toast from '../../../utils/Toast';

// 引入手机号码验证工具
import Validator from '../../../utils/validator';
//引入请求基准
import request from '../../../utils/request';
//引入请求接口地址
import {ACCOUNT_LOGIN} from '../../../utils/pathMap'

class Login extends Component{

  constructor(){
    super();
    Toast.showLoading('请求中');

    setTimeout(()=>{
      Toast.hideLoading();
    },5000)
  }


  state={
    phoneNumber:'18711005624',
    phoneValid:true,

  }
  // 改变手机号码输入
  phoneNumberChange=(phoneNumber)=>{
    this.setState({
      phoneNumber:phoneNumber,
    })
    console.log(phoneNumber);
  }

  // 当手机号码输入完毕时触发
  phoneNumberSubmitEditing=async()=>{
    console.log("手机号码输入完毕");
    //获取输入的手机号码
    const {phoneNumber}=this.state;
    const phoneValid=Validator.validatePhone(phoneNumber);
    if(!phoneValid){
      this.setState({
        phoneValid
      })
      return;
    }

    // 请求通过
    const res=await  request.post(ACCOUNT_LOGIN,{phone:phoneNumber});
    console.log(res);

  }
  render(){
    const {phoneNumber,phoneValid}=this.state
    return(
      <View>
        {/* 状态栏 */}
        <StatusBar backgroundColor='transparent' translucent={true}/>
        {/* 背景图片 */}
        <Image style={styles.bgImg} source={require('../../../res/profileBackground.jpg')}/>
        {/* 登录页内容部分 */}
        <View style={styles.loginContent}>
          <View>
            <View><Text style={styles.loginContentTxt}>手机号登录注册</Text></View>
            {/* 输入框 */}
            <View style={{marginTop:pxTodp(30)}}>
              <Input
                placeholder={"请输入手机号码"}
                leftIcon={{type:'font-awesome',name:'phone',color:'#ccc',size:pxTodp(20)}}
                maxLength={11}
                keyboardType={'phone-pad'}
                value={phoneNumber}
                inputStyle={{color:'#333'}}
                onChangeText={this.phoneNumberChange}
                errorMessage={phoneValid ? '':'手机号码格式不正确'}
                onSubmitEditing={this.phoneNumberSubmitEditing}
              />
            </View>
          </View>
        </View>

      </View>
    )
  }
}

const styles=StyleSheet.create({
  bgImg:{
    width:'100%',
    height:pxTodp(200),
  },

  loginContent:{
    padding:pxTodp(20),
  },
  // 字体样式
  loginContentTxt:{
    fontSize:pxTodp(20),
    color:'#888',
    fontWeight:'bold',
  }
})

export default Login;
